@use "../variables" as *;

.svc-image-item-value-wrapper {
  display: inline-block;
  position: relative;
}

.svc-image-item-value--new {
  height: max-content;

  .sd-imagepicker__image {
    box-sizing: border-box;
    border-radius: var(--lbr-image-corner-radius, var(--lbr-corner-radius-x05));
    border: var(--ctr-survey-image-picker-item-border-width-placeholder, var(--lbr-stroke-x1)) dashed
      var(--ctr-survey-image-picker-item-border-color-placeholder, var(--sjs-border-25, #d4d4d4ff));
  }
}

.svc-image-item-value--file-dragging {
  .sd-imagepicker__image {
    border-radius: var(--lbr-image-corner-radius, var(--lbr-corner-radius-x05));
    border: var(--ctr-survey-image-picker-item-border-width-hovered-placeholder, var(--lbr-stroke-x2)) solid
      var(--ctr-survey-image-picker-item-border-color-hovered-placeholder, var(--sjs-primary-background-500, #19b394ff));
    background: var(
      --ctr-survey-image-picker-item-background-color-hovered-placeholder,
      var(--sjs-primary-background-10, #19b3941a)
    );
  }
}

.svc-question__content--selected .svc-image-item-value--new {
  display: inline-block;
}

.svc-image-item-value-controls {
  position: absolute;
  top: calcSize(1);
  right: calcSize(1);
  z-index: 2;
}

.svc-image-item-value--new .svc-image-item-value-controls {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calcSize(1);
}
.sd-imagepicker {
  container-type: inline-size;
}
.svc-image-item-value--new.svc-image-item-value--single {
  .svc-image-item-value-controls {
    padding: 0 calcSize(6);
  }
}
@container (max-width: 496px) {
  .svc-image-item-value--new.svc-image-item-value--single {
    .svc-image-item-value-controls {
      padding: 0 calcSize(1);
    }
  }
}
@container (max-width: 176px) {
  .svc-image-item-value__placeholder {
    display: none;
  }
}

.svc-image-item-value__placeholder {
  @include lbrDefaultFont;
  color: var(--ctr-survey-placeholder-text-color, rgba(0, 0, 0, 0.5));
  text-align: center;
  font-weight: 400;
  white-space: normal;
}
.svc-image-item-value--new .svc-image-item-value-controls__button {
  background-color: transparent;
  transition: background-color $creator-transition-duration;
}

.svc-image-item-value-controls__add {
  border-radius: var(--ctr-survey-contextual-button-corner-radius, var(--lbr-corner-radius-round));
  background: var(--ctr-survey-contextual-button-background-color, var(--sjs-layer-1-background-500, #ffffffff));
  transition: background-color $creator-transition-duration;

  use {
    fill: var(--ctr-survey-contextual-button-icon-color-positive, var(--sjs-primary-background-500, #19b394ff));
    transition: fill $creator-transition-duration;
  }

  &:hover,
  &:focus {
    border-radius: var(--ctr-survey-contextual-button-corner-radius, var(--lbr-corner-radius-round));
    background: linear-gradient(
        0deg,
        var(
            --ctr-survey-contextual-button-background-color-hovered-positive,
            var(--sjs-primary-background-10, #19b3941a)
          )
          0%,
        var(
            --ctr-survey-contextual-button-background-color-hovered-positive,
            var(--sjs-primary-background-10, #19b3941a)
          )
          100%
      ),
      var(--ctr-survey-contextual-button-background-color, var(--sjs-layer-1-background-500, #ffffffff));
  }
}

.svc-choose-file-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.svc-image-item-value__item {
  .sd-imagepicker__item.sd-imagepicker__item {
    width: 100%;
  }
}

.svc-image-item-value-controls__drag-area-indicator {
  display: none;
  cursor: move;
  position: absolute;
  top: calcSize(1);
  left: calcSize(1);
}

.svc-question__content--selected .svc-image-item-value-wrapper:hover {
  .svc-image-item-value-controls__drag-area-indicator {
    display: block;
  }
}

.svc-image-item-value-wrapper--ghost {
  .svc-image-item-value-wrapper__ghost {
    display: block;
  }

  .svc-image-item-value-wrapper__content {
    display: none;
  }
}

.svc-image-item-value-wrapper__ghost {
  display: none;
  border-radius: var(--lbr-image-corner-radius, var(--lbr-corner-radius-x05));
  background: var(--ctr-survey-image-picker-drop-spot-color, var(--sjs-layer-2-background-500, #f8f8f8ff));
}

.svc-image-item-value--single {
  width: 100%;

  .sd-imagepicker__image {
    height: calcSize(36);
  }
}

.svc-image-item-value__loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
